import { Upload, Button, message } from 'antd';
import { UploadOutlined } from '@ant-design/icons';
import axios from 'axios';
import React from 'react'
import {UPLOAD_HOME_IMG} from '../utils/api'

class Demo extends React.Component {
    state = {
        fileList: [],
        uploading: false,
        datuImgUrl:[]
    };

    handleUpload = () => {
        const { fileList } = this.state;
        const formData = new FormData();
        fileList.forEach(file => {
            formData.append('files', file);
        });
        console.log(fileList);
        this.setState({
            uploading: true,
        });
        // You can use any AJAX library you like
        axios({
            url:UPLOAD_HOME_IMG,
            method:'post',
            data:formData
        }).then(data=>{
            this.setState({
                datuImgUrl:data.data.data
            });
            this.props.onUrl(this,this.state.datuImgUrl)
        });
    };

    render() {
        const { uploading, fileList } = this.state;
        const props = {
            onRemove: file => {
                this.setState(state => {
                    const index = state.fileList.indexOf(file);
                    const newFileList = state.fileList.slice();
                    newFileList.splice(index, 1);
                    return {
                        fileList: newFileList,
                    };
                });
            },
            beforeUpload: file => {
                this.setState(state => ({
                    fileList: [...state.fileList, file],
                }));
                return false;
            },
            fileList,
        };

        return (
            <>
                <Upload {...props}>
                    <Button icon={<UploadOutlined />}>选择图片</Button>
                </Upload>
                <Button
                    type="primary"
                    onClick={this.handleUpload}
                    disabled={fileList.length === 0}
                    loading={uploading}
                    style={{ marginTop: 16 }}
                >
                    {uploading ? 'Uploading' : '确定上传'}
                </Button>
            </>
        );
    }
}

export default Demo